<template>
  <div class="app-container">
    <el-form
      ref="queryParams"
      :model="queryParams"
      size="small"
      label-suffix=":"
      label-position="right"
      label-width="120px"
    >
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-form-item
            :label="$t('printer')"
            prop="printer"
          >
            <el-select
              v-model="queryParams.printer"
              :placeholder="$t('pleaseSelectPrinter')"
              style="width: 200px"
              clearable
            >
              <el-option
                v-for="item in printerList"
                :key="item.value"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="1.5" style="margin-left: 120px;">
          <el-button
            type="primary"
            size="medium"
            @click="submit"
          >
            {{ $t("confirm") }}
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getPrinter } from '@/utils/print'
export default {
  name: 'PrinterSetup',
  data() {
    return {
      queryParams: {
        printer: ''
      },
      printerList: [],
      storagePrinterKey: 'printer'
    };
  },
  created() {
    this.getPrinter()
  },
  methods: {
    getPrinter() {
      getPrinter(
        (res) => {
          for (let i = 0; i < res.data.length; i++) {
            this.printerList.push({
              value: res.data[i],
              text: res.data[i],
            });
          }

          this.queryParams.printer = localStorage.getItem(this.storagePrinterKey) || ''
        },
        (res) => {
          this.$message({
            message: this.$t('failedToObtainPrinter') + ' ' + res.message,
            type: 'warning'
          })
        }
      );
    },
    submit() {
      localStorage.setItem(this.storagePrinterKey, this.queryParams.printer)
    },
  },
};
</script>

<style></style>
